<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('Summernote富文本编辑器')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: jasny-bootstrap-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="col-sm-12 search-collapse">
        <form id="formId" enctype="multipart/form-data">
            <div class="select-list" style="display: flex;">
                <ul>
                    <li class="form-group">
                        <label class="col-sm-3 control-label ">实验名称：</label>
                        <div class="col-sm-8 input-group">
                            <input type="text" name="experimentName" id="experimentName" required class="form-group"/>
                        </div>
                        <!--<input type="text" name="experimentName" id="experimentName" required class="form-group"/>-->
                    </li>
                    <li>
                        <label class="col-sm-3 control-label ">课程名称：</label>
                        <div class="col-sm-8 input-group">
                            <select name="courseId" id="courseId" style="width:204px;height: 34px;" required>
                                <option value="" th:text="${#lists.isEmpty(courseList)?'对不起，当前学期并无您开设的课程':'请选择'}" ></option>
                                <option th:each="list : ${courseList}" th:value="${list.id}" th:text="${list.courseName + '  开课名称: ' + list.kaikeName}"></option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label class="col-sm-3 control-label ">实验类型：</label>
                        <div class="col-sm-8 input-group">
                            <select name="experimentType" id="experimentType">
                                <option  th:text="实物实验" th:value="1"></option>
                                <!--<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
                            </select>
                        </div>
                    </li>
                    <!--<li>
                        <p>在线实验：</p>
                        <select name="idweb" id="idweb" style="width:204px;height: 34px;" >
                            <option value="null">请先选择课程</option>
                            <option th:each="list : ${weblist}" th:value="${list.courseId}+','+${list.id}+','+${list.webInter}" th:text="${list.webName}" hidden></option>
                        </select>
                    </li>-->
                    <li>
                        <label class="col-sm-3 control-label ">开始时间：</label>
                        <div class="col-sm-8 input-group">
                            <input type="text" name="beginTime" id="beginTime" required/>
                        </div>
                    </li>
                    <li>
                        <label class="col-sm-3 control-label ">结束时间：</label>
                        <div class="col-sm-8 input-group">
                            <input type="text" name="endTime" id="endTime" required/>
                        </div>
                    </li>
                    <li style="display: flex;">
                        <span>已预约的实验室：</span>
                        <select  th:remove="all-but-first" class="form-control" name="experimentLabId" id="experimentLabId" style="width:244px;height: 34px" required>
                            <option th:each="list : ${labList}" th:value="${list.section}" th:text="${list.labName}"></option>
                        </select>
                    </li>
                    <li style="position:relative;">
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="baocun()" ><i class="fa fa-search"></i>&nbsp;保存</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.modal.closeTab();" ><i class="fa fa-refresh"></i>&nbsp;取消</a>
                    </li>
                </ul>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="position:relative;left:50%;">实验介绍</h5>
                            <input type="hidden" name="experimentIntroduce" id="experimentIntroduce">
                        </div>
                        <div class="ibox-content no-padding">
                            <div class="summernote1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
<!--                <div class="col-sm-12">-->
<!--                    <div class="ibox float-e-margins" id="onlineweb">-->
<!--                        &lt;!&ndash;<div class="ibox-title">-->
<!--                            <h5 style="position:relative;left:50%;">在线实验</h5>-->
<!--                            <a class='btn btn-primary btn-rounded btn-sm' id="mess" target='_blank'><i class='fa'></i>&nbsp;全屏</a>-->
<!--                        </div>-->
<!--                        <div id="onlineweb" class="ibox-content no-padding" align="center">-->

<!--                        </div>&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="position:relative;left:50%;">实验报格式</h5>
                            <input type="hidden" name="experimentShape" id="experimentShape">
                        </div>
                        <div class="ibox-content no-padding">
                            <div class="summernote2">
                               <div width="90%">
                                    <table align="center" border="1px" cellspacing="0" width="1000px">
                                        <tr height="30px">
                                            <td width="100/6%">实验名称</td>
                                            <td width="100/6%"></td>
                                            <td width="100/6%">专业/班级</td>
                                            <td width="100/6%"></td>
                                            <td width="100/6%">实验日期</td>
                                            <td width="100/6%"></td>
                                        </tr>
                                        <tr height="30px">
                                            <td>姓名</td>
                                            <td></td>
                                            <td>学号</td>
                                            <td></td>
                                            <td>指导教师</td>
                                            <td></td>
                                        </tr>
                                        <tr height="30px">
                                            <td width="100/6%">实验成绩</td>
                                            <td colspan="5"></td>
                                        </tr>
                                        <tr height="80px">
                                            <td colspan="6" ><p>一：实验目的</p></td>
                                        </tr>
                                        <tr height="80px">
                                            <td colspan="6"><p>二：实验步骤</p></td>
                                        </tr>
                                        <tr height="80px">
                                            <td colspan="6"><p>三：实验心得(实验收获：发现的问题及解决情况；改进建议)</p></td>
                                        </tr>
                                        <tr height="80px">
                                            <td colspan="6"><p>四：指导教师评价</p></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="display: flex">
                            <h5 style="position:relative;left:50%;">教师批改</h5>
                            <p style="position:relative;left:84%;">打分：</p>
                            <input type="text" name="machineNumber" style="position:relative;left:84%;"/>
                        </div>

                        <div class="ibox-content no-padding">
                            <div class="summernote3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->

            <div>
               <div class="ibox-title">
                    <h5 style="position:relative;left:50%;">选择实验资源</h5>
                </div>

                <!--<select class="form-control noselect2 selectpicker" name="experimentType" id="experimentType">
                </select>-->
                <div class="form-group">
                    <label class="font-noraml">允许多选,再次点击取消选中</label>
                    <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择实验资料：" multiple name="fileId" id="fileId">
                        <option th:each="list : ${explors}" th:value="${list.id}" th:text="${list.resourceName}+'('+${list.courseName}+')'"></option>
                    </select>
                </div>

                <div class="ibox-title">
                    <h5 style="position:relative;left:50%;">教师自己上传</h5>
                </div>
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                     <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                     <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input name="file" type="file" id="uploadPath"></span>
                     <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                 </div>
                <div class="ibox-title">
                    <div class="radio">
                        <h5>本实验是否允许学生上传实验报告附件：</h5>
                        <label>
                            <input type="radio" checked="" value="1" id="optionsRadios1" name="allow">允许</label>
                        <label>
                            <input type="radio" value="2" id="optionsRadios2" name="allow">不允许</label>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script>
    $('#beginTime').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $('#endTime').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    var prefix = ctx + "buildexperiment";
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN'
        });
    });
    var edit = function () {
        $("#eg").addClass("no-padding");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true
        });
    };
    var save = function () {
        $("#eg").removeClass("no-padding");
        var aHTML = $('.click2edit').summernote('code');
        $('.click2edit').summernote('destroy');
    };

    function pass(){
            $("#experimentIntroduce").val($(".summernote1").summernote("code"));
            $("#experimentShape").val($(".summernote2").summernote("code"));
            $.modal.confirm("确认要保存吗?", function() {
                var form = new FormData(document.getElementById("formId"));
                $.ajax({
                    url:prefix+"/addExperiment",
                    type:"post",
                    data:form,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success:function(data){
                        if(data.code==500){
                            $.modal.msgError(data.msg)
                        }
                        if(data.code==0){
                            $.modal.msgSuccess(data.msg)
                            var int=self.setInterval(function(){  // 这个方法是说在延迟两秒后执行大括号里的方法
                                $.modal.reload();
                            },1000) //这里2000代表两秒

                        }
                    }
                });

            });
    }

    $('#datetimepicker-demo-1').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $('#datetimepicker-demo-2').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $('.summernote1').summernote({
        placeholder: '请输入实验介绍',
        height : 192,
        lang : 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function(files, editor, $editable) {
                var formData = new FormData();
                formData.append("file", files[0]);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            //alert(result.url+","+result.fileName)
                            $('.summernote1').summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
        }
    });
    $('.summernote2').summernote({
        placeholder: '请输入实验报格式',
        height : 500,
        lang : 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function(files, editor, $editable) {
                var formData = new FormData();
                formData.append("file", files[0]);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            //alert(result.url+","+result.fileName)
                            $('.summernote2').summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
        }
    });



    /*课程名称和所属该课程的在线实验二级联动*/
    var array = new Array();  //定义数组，用来存储遍历的所有的在线试验信息
    $("#idweb option").each(function(){  //遍历所有option
        var txt = $(this).val();   //获取option值包括课程Id,在线实验Id,在线实验网址
        var txt2=$(this).text();//在线实验名称
        var b=txt+','+txt2;
        array.push(b);  //添加到数组中
    })
    $("#courseId").change(function() {
        console.log(array)
        var a=$("#courseId").val(); //获取点击的课程Id
        //console.log(a)
        $("#idweb option").remove();  //移除所有的option信息
        $("#idweb").append("<option value=' '>请选择</option>")
        for (var item of array) {
            var index=item.indexOf(",")
            var c=item.substring(0,index)
            //获取课程号对应点击选择的课程的在线实验
            if(c==a){
                //alert(c)
                var lastIndex=item.lastIndexOf(",");
                //console.log(lastIndex)
                var value1=item.substring(0,lastIndex);
                var text1=item.substring(lastIndex+1,item.length);
                console.log(text1)
                $("#idweb").append("<option value="+value1+" th:text="+text1+">"+text1+"</option>")
            }
        }
    })
    //实验网址自动加载
    $("#idweb").change(function () {
        //alert(1)
         var value2=$("#idweb").val();
         var lastIndex=value2.lastIndexOf(",");
         var text2=value2.substring(lastIndex+1,value2.length);
         /*console.log(value2)
         console.log(text2)*/
         //使用iframe标签同步加载网址
         $("#onlineweb").html(" <div class=\"ibox-title\">\n" +
             "\t<h5 style=\"position:relative;left:50%;\">在线实验</h5> <span style=\"float: right\">若实验右下角点击全屏不能放大，请点击：<a class=\"btn btn-primary btn-rounded btn-sm\" id='mess' target=\"_blank\"><i class=\"fa\"></i>&nbsp;全屏</a></span>\n" +
             "</div>\n" +
             "<div class=\"ibox-content no-padding\" align=\"center\">\n" +
             "\t<div class=\"iframe-body-sty\" style='position: relative;height:600px;width: 850px;background-color: white;'>\n" +
             "\t\t<iframe style='position: absolute;transform:scale(0.5);left: -550px;top: -170px;' src="+text2+" width='1920px' height='920px'\n" +
             "\t\t allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" oallowfullscreen=\"true\"\n" +
             "\t\t msallowfullscreen=\"true\"></iframe>\n" +
             "\t</div>\n" +
             "</div>")
         $('#mess').attr('href',text2);  //添加href属性
        /*$("#onlineweb").html("<Iframe src=\"http://baidu.com\"; width=\"800px\" height=\"500px\" scrolling=\"no\" frameborder=\"0\"></iframe>")*/
    })
    /*<Iframe src="http://baidu.com"; width="50px" height="52px" scrolling="no" frameborder="0"></iframe>*/


    /*文件上傳*/
    function uploadFile() {
        //获取被选中的单选框的值
        var val = $('input[name="allow"]:checked').val();
       // console.log(val)
        var formData = new FormData();
        if ($('#uploadPath')[0].files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }
        /*有文件上传时，将对象其他字段也获取到*/
        formData.append('fileName', $("#fileName").val());
        formData.append('file', $('#uploadPath')[0].files[0]);
        formData.append('experimentName',$('#experimentName').val())
        formData.append('courseId',$('#courseId').val())
        formData.append('experimentLabId',$('#experimentLabId').val())
        formData.append('experimentIntroduce',$(".summernote1").summernote("code"))
        formData.append('experimentShape',$(".summernote2").summernote("code"))
        formData.append('fileId',$('#fileId').val())
        //formData.append('idweb',$('#idweb').val())
        formData.append('experimentType',$("#experimentType").val())
        formData.append('allow',val);
        formData.append('beginTime',$("#beginTime").val());
        formData.append('endTime',$("#endTime").val());
        $.ajax({
            url: prefix + "/adddvadvd",
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                $.operate.successCallback(result);
            }
        });
    }


    $("#formId").validate({
        focusCleanup: true
    });

    /*保存按鈕*/
    function  baocun() {
        var a=$("#uploadPath").val();
        //判断是否有文件上传，选择哪种情况的添加
        if(a==null || a=='' ){
            //表示没有文件上传
            console.log(1);
            if ($.validate.form()) {
                if($("#endTime").val()<=$("#beginTime").val()){
                    $.modal.alertError("结束时间必须大于开始时间")
                }else {
                    pass();
                }
            }
        }else{
            if ($.validate.form()) {
                if($("#endTime").val()<=$("#beginTime").val()){
                    $.modal.alertError("结束时间必须大于开始时间")
                }else {
                    uploadFile()
                }
            }
        }
    }
</script>
</body>
</html>
